<template>
  <div class="viewcontainer">
    <el-dialog :title="$t('system.distRole')" :visible.sync="rolePermissionVisible" width="552px">
      <setRole v-if="rolePermissionVisible" ref="role" :userid="currentUser.id" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="rolePermissionVisible = false">{{$t("common.cancel")}}</el-button>
        <el-button type="primary" @click="setRole">{{$t("common.confirm")}}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="$t('system.distPermis')" :visible.sync="menuPermissionVisible" width="552px">
      <menuPermission
        permissionType="user"
        :target="currentUser.id"
        v-if="menuPermissionVisible"
        ref="menuPermission"
        :style="{height:menuPermissionHeight}"
      ></menuPermission>
      <span slot="footer" class="dialog-footer">
        <el-button @click="menuPermissionVisible = false">{{$t("common.cancel")}}</el-button>
        <el-button type="primary" @click="setMenu">{{$t("common.confirm")}}</el-button>
      </span>
    </el-dialog>

    <el-row class="view-header">
      <el-col :span="20">
        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
          <el-form-item :label="$t('system.userId')">
            <el-input v-model="queryParam.id" />
          </el-form-item>
          <el-form-item :label="$t('system.userName')">
            <el-input v-model="queryParam.name" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryClick">{{$t("common.query")}}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" class="actionbar">
        <el-button
          type="primary"
          @click="add"
          v-if="askPermission('system_user_add')"
        >{{$t("common.add")}}</el-button>
      </el-col>
    </el-row>
    <el-row class="view-main">
      <el-table :data="queryData" height="100%" style="width: 100%" v-loading="loading">
        <el-table-column type="index" width="50" />
        <el-table-column prop="id" :label="$t('system.userId')" width="180" />
        <el-table-column prop="name" :label="$t('system.userName')" width="180" />
        <el-table-column prop="note" :label="$t('common.note')" />
        <el-table-column fixed="right" :label="$t('common.operation')" width="220">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="askPermission('system_user_setuserpermission')"
              @click="showSetMenu(scope.row)"
            >{{$t("system.funcPermis")}}</el-button>
            <el-button
              type="text"
              size="small"
              v-if="askPermission('system_user_setrole')"
              @click="showSetRole(scope.row)"
            >{{$t("system.distRole")}}</el-button>
            <el-button
              type="text"
              size="small"
              v-if="askPermission('system_user_detail')"
              @click="edit(scope.row)"
            >{{$t("common.edit")}}</el-button>
            <el-button
              type="text"
              size="small"
              v-if="askPermission('system_user_delete')"
              @click="remove(scope.row)"
            >{{$t("common.delete")}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="view-footer pagebar">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="queryParam.$pagesize"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
// import api from "@/api/user";
import dataHelper from "@/utils/dataHelper";
import setRole from "./setRole";
import menuPermission from "../components/menuPermission";
import userApi from "@/api/user";
import baseView from "@/views/base";
export default {
  name: "system_user",
  extends: baseView,
  components: { setRole, menuPermission },
  model: {
    prop: "value",
    event: "valuechange",
  },
  props: {
    value: {
      type: Object,
    },
  },
  data() {
    return {
      rolePermissionVisible: false,
      menuPermissionVisible: false,
      queryParam: {
        $pageindex: 1,
        $pagesize: 25,
      },
      loading: false,
      queryData: [],
      currentUser: {},
      total: 0,
    };
  },

  computed: {
    menuPermissionHeight() {
      return document.body.clientHeight * 0.5 + "px";
    },
  },
  watch: {},
  mounted() {
    this.query();
  },
  methods: {
    remove(data) {
      this.$confirm(
        this.$t("common.sureDelete").replace("{0}", data.id),
        this.$t("common.prompt"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          userApi.remove(data.id).then((res) => {
            this.$message({
              message: this.$t("common.delSucc"),
              type: "success",
            });
            this.query();
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    edit(data) {
      this.openByPath(
        "/system/user/detail",
        { id: data.id },
        { title: data.name + this.$t("system.userEdit"), target: "_blank" }
      );
      // this.$router.push({
      //   path: "/system/user/detail",
      //   query: { id: data.id }
      // });
    },
    add() {
      this.openByPath("/system/user/detail", null, {
        title: this.$t("system.userAdd"),
        target: "_blank",
      });
    },
    showSetMenu(data) {
      this.currentUser = data;
      this.menuPermissionVisible = true;
    },
    showSetRole(data) {
      this.currentUser = data;
      this.rolePermissionVisible = true;
    },
    setRole(data) {
      const role = this.$refs.role;
      role.save().then((res) => {
        this.rolePermissionVisible = false;
      });
    },
    setMenu() {
      const permission = this.$refs.menuPermission.getPermission();
      userApi
        .setUserPermissions(this.currentUser.id, permission.join(","))
        .then((res) => {
          this.$message({
            message: this.$t("system.funcSetSucc"),
            type: "success",
          });
          this.menuPermissionVisible = false;
        });
    },
    queryClick() {
      this.queryParam.$pageindex = 1;
      this.query();
    },
    refreshData() {
      this.queryClick();
    },
    pageChange(index) {
      this.queryParam.$pageindex = index;
      this.query();
    },
    query() {
      this.loading = true;
      dataHelper.queryHelper
        .query(this.$route.path, "system/user.entity", this.queryParam)
        .then((res) => {
          this.queryData = res.data.rows;
          this.total = res.data.total;
          this.loading = false;
        });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
</style>

